<template>
  <div class="container">
    <van-nav-bar
      title="狗狗"
      left-text="返回"
      left-arrow
      @click-left="$router.back(-1)"
    ></van-nav-bar>
    <van-tabs v-model="active">
      <van-tab title="最新">
        <ul class="item">
          <li>
            <img src="../assets/img/0221013203534.jpg" />
            <p>柯基犬</p>
            <span>￥3800</span>
            <span>广东 汕头</span>
          </li>
          <li>
            <img src="../assets/img/0221013203534.jpg" />
            <p>法国斗牛犬</p>
            <span>￥5500</span>
            <span>四川 成都</span>
          </li>
          <li>
            <img src="../assets/img/0221013203534.jpg" />
            <p>边境牧羊犬</p>
            <span>￥3000</span>
            <span>四川 成都</span>
          </li>
          <li>
            <img src="../assets/img/0221013203534.jpg" alt="" />
            <p>边境牧羊犬</p>
            <span>￥2800</span>
            <span>四川 成都</span>
          </li>
          <li>
            <img src="../assets/img/0221013203534.jpg" alt="" />
            <p>边境牧羊犬</p>
            <span>￥3280</span>
            <span>四川 成都</span>
          </li>
          <li>
            <img src="../assets/img/0221013203534.jpg" alt="" />
            <p>边境牧羊犬</p>
            <span>￥5200</span>
            <span>四川 成都</span>
          </li>
        </ul>
      </van-tab>
      <van-tab title="茶杯泰迪"> </van-tab>
      <van-tab title="金毛巡回猎犬"> </van-tab>
      <van-tab title="内拉布拉多"> </van-tab>
    </van-tabs>
  </div>
</template>

<script>
export default {};
</script>

<style lang="scss" scoped>
* {
  margin: 0;
  padding: 0;
}
.container {
  box-sizing: border-box;
  font-size: 14px;
}
ul,
li {
  list-style: none;
}

p {
  margin: 0;
}
.item {
  display: flex;
  justify-content: space-evenly;
  flex-wrap: wrap;
}
.item li {
  width: 40%;
  margin: 10px 0;
}
.item li > img {
  display: block;
  width: 100%;
}
.item li p {
  margin: 5px;
}
.item li > span:nth-child(3) {
  color: red;
}
.item li > span:last-child {
  color: #b4b4b4;
  float: right;
  padding: 0 10px;
}
img {
  border-radius: 7px;
}
</style>
